
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=IkeVavj9h0Lvf9uchPKh9GFx"></script>
    <title>iRTU寻物</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
    <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="container" id="app">
        <div class="row">
            设备IMEI <input type="text" v-model="selectd_imei">
            <button type="button" class="btn btn-success" @click="dev_wakeup()">唤醒</button>
        </div>
        <div class="row">
            <div id="allmap" style="width:100%; height:600px;"></div>
        </div>
        <div>
            <div>GPS原始 {{dev.lng}} {{dev.lat}}</div>
            <div>GSM信号强度 {{dev.csq}} {{dev.chg ? "充电中" : "未充电"}}</div>
            <div>{{dev.gpsopen ? "持续定位" : "休眠中"}}</div>
        </div>
    </div>
                
</body>
</html>
<script type="text/javascript">

Date.prototype.format = function(fmt) { 
     var o = { 
        "M+" : this.getMonth()+1,                 //月份 
        "d+" : this.getDate(),                    //日 
        "h+" : this.getHours(),                   //小时 
        "m+" : this.getMinutes(),                 //分 
        "s+" : this.getSeconds(),                 //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S"  : this.getMilliseconds()             //毫秒 
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
     for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
    return fmt; 
}
</script>
<script type="text/javascript">

// 变量初始化
var bm = null;
var gtext = ""
var ws;
var mark = null;
var WS_URL = window.location.host + "/websocket"
var _app = null

$(function(){
    bm = new BMap.Map("allmap");
    bm.centerAndZoom(new BMap.Point(113.229835, 23.4065766), 16);
    bm.addControl(new BMap.NavigationControl());
    bm.enableScrollWheelZoom(true);
})


function map_update() {
	var dev = _app.dev

    if (1) {
        var x = dev.lng;
        var y = dev.lat;
        //console.log(x, y);
        var result = gcoord.transform(
            [x, y],    // 经纬度坐标
            gcoord.WGS84,               // 当前坐标系
            gcoord.BD09                 // 目标坐标系
        );
        var ggPoint = new BMap.Point(result[0], result[1]);
        bm.setCenter(ggPoint);
        if (mark != null) {bm.removeOverlay(mark)}
        bm.clearOverlays();
        var markergg = new BMap.Marker(ggPoint);
        bm.addOverlay(markergg); //添加谷歌marker
        var labelgg = new BMap.Label("最后心跳"+new Date().format("yyyy-MM-dd hh:mm:ss"),{offset:new BMap.Size(20,-10)});
        markergg.setLabel(labelgg); //添加谷歌label
        mark = markergg
    }
}
function ws_init(){
    // 如果页面是https,那么必须走wss协议, 否则走ws协议
    if (location.protocol == 'http:') {
        ws = new WebSocket("ws://"+WS_URL);
    } else {
        ws = new WebSocket("wss://"+WS_URL);
    }
    // 连接成功后,会触发onopen回调
    ws.onopen = function(event) {
        console.log("websocket onopen ...");
        // 监听设备
        var watch = {action:"join", room:_app.selectd_imei};
        ws.send(JSON.stringify(watch));
    };
    ws.onclose = ws_init;
    // 收到服务器发来的信息时触发的回调
    ws.onmessage = function(event) {
        console.log("websocket onmessage", event.data);
        var re = eval("("+event.data+")");
        if (re.sta) {
        	var sta = re.sta
            _app.dev.gpsopen = sta.gpsopen
            _app.dev.vib = sta.vib
            _app.dev.acc = sta.acc
            _app.dev.act = sta.act
            _app.dev.chg = sta.chg
            _app.dev.und = sta.und
            _app.dev.volt = sta.volt
            _app.dev.vbat = sta.vbat
            _app.dev.csq = sta.csq
        }
        else if (re.loc) {
        	var loc = re.loc
        	_app.dev.lng = loc.lng
        	_app.dev.lat = loc.lat
        	map_update()
        }
    }
}
// 定时发个空消息,避免服务器断开连接
function ws_ping() {
    if (ws) {
        ws.send("{}");
    }
}

setInterval("ws_ping()", 25000); // 25秒一次就可以了, 必要操作!!!
function data_reload() {
    if (ws)
        ws.close()
    else
        ws_init()
}
_app = new Vue({
    el : "#app",
    data : {
        selectd_imei : "862285033462874",
        dev : {
            lng : "0.0",
            lat : "0.0",
            csq : 0,
            gpsopen : false
        }
    },
    methods : {
        dev_wakeup: function() {
            $.ajax({
                url : "/gps/dev/wakeup/" + _app.selectd_imei,
                type : "POST",
                success : function(re){
                	if (re.ok)
                    	alert("已下发");
                	else
                		alert(re.msg);
                }
            })
        }
    },
    watch : {
        selectd_imei : function() {data_reload()}
    }
})    
$(function(){
    data_reload()
})
</script>

